<route lang="yaml">
  meta:
    title: 工单追踪
  </route>

<script setup>
import axios from 'axios'
import { computed, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

// 表格数据
const tableData = ref([])

// 筛选条件
const stateOptions = [
  { value: '-1', label: '全部' },
  { value: '0', label: '待发布/待派遣' },
  { value: '1', label: '已发布/已派遣' },
  { value: '2', label: '未到场' },
  { value: '3', label: '已到场' },
  { value: '4', label: '检测' },
  { value: '5', label: '维修' },
  { value: '6', label: '已结束' },
]
const selectedState = ref('')
const selectedIdorUnit = ref('')

// 分页相关
const currentPage = ref(1)
let totalNum = reactive(0)
const pageSize = 10

// 对话框
const dialogVisible = ref(false)

// 处理分页
function handlePageChange(page) {
  currentPage.value = page
  fetchData({ pageNum: currentPage.value })
}

// 处理点击事件
function handleOrderClick(row) {
  Object.keys(dialogData).forEach((key) => {
    dialogData[key] = row[key] !== undefined ? row[key] : ''
  })
  dialogVisible.value = true
}

// 路由导航
const router = useRouter()
function openOrderPage(row) {
  const to = router.resolve({
    name: 'order-details',
    params: { id: row.workOrderCode },
  })
  const httpUrl = to.href.replace(/^https:\/\//, 'http://')
  window.open(httpUrl, '_blank')
  // window.open(to.href, '_blank')
}

// 获取数据
async function fetchData({ pageNum = '1', feedbackType = 3, workOrderState = -1, searchKey = null, customerCode = null, customerName = null, feedbackRegion = null, electricianCode = null }) {
  // console.log('selectedState', selectedState.value)
  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/workOrder/findAllByCondition', {
      pageNum,
      pageSize,
      feedbackType,
      workOrderState: selectedState.value,
      searchKey,
      customerCode,
      customerName: selectedIdorUnit.value,
      feedbackRegion,
      electricianCode,
    })

    if (response.data) {
      tableData.value = response.data.data.rows
      totalNum = response.data.data.total
      console.log('totalNum', totalNum)
    }
  }
  catch (error) {
    console.error('获取数据时出错:', error)
  }
}

// 格式化工单状态
function formatWorkOrderType(row, column, cellValue) {
  if (cellValue === 1) { return '派遣' }
  if (cellValue === 2) { return '发布' }
  return '未知'
}

function formatWorkOrderState(row, column, cellValue) {
  switch (cellValue) {
    case 0: return '待发布/待派遣'
    case 1: return '未接单'
    case 2: return '未到场'
    case 3: return '已到场'
    case 4: return '检测中'
    case 5: return '维修中'
    case 6: return '已结束'
    default: return '未知'
  }
}
function resetSelectData() {
  selectedState.value = stateOptions[0].value
}

// 页面初始化时获取数据
onMounted(() => {
  resetSelectData()
  fetchData({})
})
</script>

<template>
  <div class="dashboard">
    <div class="header">
      工单追踪
    </div>
    <!-- 筛选区域 -->
    <el-row :gutter="20" class="filter-row">
      <el-col :span="4">
        <el-select v-model="selectedState" placeholder="请选择工单状态" clearable>
          <el-option v-for="state in stateOptions" :key="state.value" :label="state.label" :value="state.value" />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input v-model="selectedIdorUnit" style="width: 240px;" placeholder="请输入工单号或单位名称" />
      </el-col>
      <el-col :span="4">
        <el-button type="primary" class="search-button" @click="fetchData({})">
          搜索
        </el-button>
      </el-col>
      <el-col :span="7" />
      <!-- <el-col :span="5">
        <el-button type="primary" class="search-button" @click="filterData">
          导出采购附件数据
        </el-button>
        <el-button type="primary" class="search-button" @click="filterData">
          导出回执数据
        </el-button>
      </el-col> -->
    </el-row>
    <!-- 数据表格 -->
    <el-table :data="tableData" border class="table" style="width: 100%; cursor: pointer;" @row-click="openOrderPage">
      <el-table-column prop="workOrderCode" label="工单号" align="center">
          <!-- <template #default="{ row }">
            <span v-if="row.workGlance === 0" class="red-dot"></span>
            <span>{{ row.workOrderCode }}</span>
          </template> -->
        </el-table-column>
      <el-table-column prop="customerName" label="业主单位" align="center" />
      <el-table-column prop="customerUserPhone" label="联系人" align="center" />
      <el-table-column prop="feedbackDate" label="上报时间" align="center" />
      <el-table-column prop="workOrderAcceptDate" label="响应时间" align="center" />
      <el-table-column prop="workOrderState" label="工单状态" :formatter="formatWorkOrderState" align="center" />
      <el-table-column prop="electricianName" label="接单电工" align="center" />
      <el-table-column prop="workOrderType" label="工单类型" :formatter="formatWorkOrderType" align="center" />
    </el-table>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <div class="pagination">
        <el-pagination
          size="normal" background layout="prev, pager, next" :total="totalNum" class="mt-4" :current-page="currentPage" :default-page-size="pageSize"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.red-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 5px;
  background-color: red;
  border-radius: 50%;
}

.dashboard {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.header {
  display: flex;
  justify-content: center;
  width: 30%;
  padding: 10px 20px;
  margin-bottom: 20px;

  /* 将分页按钮居中 */
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.filter-row {
  margin-bottom: 20px;
}

.search-button {
  color: white;
  background: linear-gradient(45deg, #3b82f6, #06b6d4);
  border: none;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
}

.search-button:hover {
  background: linear-gradient(45deg, #06b6d4, #3b82f6);
}

.table {
  margin-top: 20px;
  overflow: hidden;
  border-radius: 8px;
}

.el-table {
  --el-table-row-hover-bg-color: rgb(14 95 255 / 50%);
}

.table >>> .el-table__header-wrapper th {
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  text-align: center;
  background-color: #f3f4f6;
  border-bottom: 2px solid #e5e7eb;
}

.action-button {
  padding: 4px 8px;
  font-weight: bold;
  color: #3b82f6;
  border-radius: 5px;
  transition: all 0.2s;
}

.action-button:hover {
  background-color: #f3f4f6;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.pagination {
  bottom: 20px;
  display: flex;

  /* 将分页按钮居中 */
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  margin-top: 20px;
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 -2px 10px rgb(0 0 0 / 5%);
}

/* 图片 */
.image-container {
  display: flex;

  /* 使用 flexbox 布局 */
  overflow-x: auto;

  /* 允许横向滚动 */
}

.image-thumbnail {
  width: 100px;

  /* 设定缩略图宽度 */
  height: 100px;

  /* 保持图片的纵横比并填满容器 */
  margin-right: 10px;

  /* 图片之间的间距 */
  cursor: pointer;

  /* 设定缩略图高度 */
  object-fit: cover;

  /* 鼠标悬停时显示为可点击 */
}

.modal {
  position: fixed;

  /* 固定定位 */
  inset: 0;

  /* 半透明黑色背景 */
  display: flex;
  align-items: center;

  /* 使用 flexbox 居中对齐 */
  justify-content: center;
  background: rgb(0 0 0 / 80%);
}

.modal-image {
  max-width: 90%;

  /* 最大宽度 */
  max-height: 90%;

  /* 最大高度 */
}

.pagination-wrapper {
  position: fixed;
  bottom: 20px;
  left: 280px;
  z-index: 10;
  align-items: center;
  width: 80%;
  padding: 10px 0;
}
</style>
